<template>
 <div>
  <el-header>
   <div class="headerLift">
     <img src="../../public/image/logo3.jpg" alt="">
   </div>
   <div class="headerContent">
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
    background-color="#000"  text-color="#fff" active-text-color="#ffd04b" router
  >
    <el-menu-item :index="item.path" v-for="item in itemList" :key="item.path">{{item.name}}</el-menu-item>
   
 </el-menu>
   </div>
   <div class="headerRight">
     <span>欢迎您:</span>
    <img src="../../public/image/bg2.jpg" alt="">
    <span> {{user}}用户</span>
   </div>
  </el-header>
  <div class="mainMsg">
 <router-view></router-view>
  </div>

 </div>
</template>
<script>
import {mapState,mapMutations}  from 'vuex'

export default {
  created() {
    document.title="智慧社区"
    this.isToken()
    this.$router.push("/user")
  },
  data() {
    return {
      activeIndex:'/community/communityCenter',
          itemList:[
        {name:'社区内容',path:'/community/communityCenter'},
        {name:'数据内容',path:'/community/dataContent'},
        {name:'处理中心',path:'/community/processingCenter'},
        {name:'个人中心',path:'/community/personCenter'}
      ]
    }
  },
  methods: {
      // 通过states获取操作对象
      ...mapMutations([
      'putUser'
    ]),
        // 验证登录token是否还在
    isToken(){
    if (!localStorage.getItem("loginToken")) {
      this.$router.push('/login')
      this.$message.warning("token过期请重新登录！")
      return
    }
    const token =localStorage.getItem("loginToken")
    const result=this.$jwtCode(token)
    this.putUser(result)
    
    },
  },
   computed:{
    ...mapState([
      'user',
      'password',
      'time'
    ])
  },
}
</script>
<style>
.el-header{
  background: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh !important;
}
.headerLift img{
  width: 100%;
  height: 100%;
}
.headerLift{
  width: 18vw;
  height: 100%;
}
.headerContent{
  width: 40vw;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.headerRight{
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  margin-right: 5vw;
}
.headerRight>*{
  margin: 0 5px;
}
.headerRight img{
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
}
.mainMsg{
  background: #eee;
  height: 90vh;
  overflow-y: scroll;
}
.mainMsg::-webkit-scrollbar {display:none}
</style>